<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ page import="prescription.*" %>
    <%@ taglib prefix="jstl" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>药方查询页</title>

<link rel="stylesheet" href="include/search_package.css"/>

<script type="text/javascript" src="include/jquery-2.1.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){

	function showHideTabs2(index){
		
		$('.tabHeader2>li.active').removeClass('active');

		$('.tabHeader2>li:eq('+index+')').addClass('active');

		$('.tabContent2:visible').hide();
		$('.tabContent2:eq('+index+')').show();	
	}
    
	
	$('.tabContent:gt(0)').hide();//把内容全部删除
	$(".tabHeader>li:eq(0)").addClass("active");
	$('.tabHeader>li').click(function(){
	
		var currentTabIndex =$('.tabHeader>li').index(this);//找出当前点击的病人
		showHideTabs(currentTabIndex);//让点击的病人选项变成选中的颜色
		
	});

	function showHideTabs(index){
		$('.tabHeader>li.active').removeClass('active');

		$('.tabHeader>li:eq('+index+')').addClass('active');

		$('.tabContent:visible').hide();//对病人信息进行改变
		$('.tabContent:eq('+index+')').show();	
	}

	//当病人选项被选择后把病人id传出去
	$('.tabHeader').click(function(){
	
		$('.contents2').html(" ");
		$.post('search_package_1.do',{
					patient_id:$("li.active").attr('id')//获取病人的id
					
				},
				function(data){	
					
						$('.tabHeader2').html(data);
						//点击了病人后，药方同时惊醒显示初始化
						$('.tabContent2:gt(0)').hide();//把内容全部删除
						$(".tabHeader2>li:eq(0)").addClass("active");
						
				
						
						$('.tabHeader2>li').click(function(){
									$(".tabHeader2>li:eq(0)").addClass("active");
									var currentTabIndex2 = $('.tabHeader2>li').index(this);
									showHideTabs2(currentTabIndex2);

			});

				
		})

	});

//在药方选择后显示药方的信息
	$('.tabHeader2').click(function(){
		$.post('search_package_2.do',{
			package_id:$("li.active>input:hidden").val()
		},
			function(data){
		//	alert($("li.active>input:hidden").val());
				$('.contents2').html(data);
			})
	});
	
});
</script>
</head>
<body>
	<h1>药方查询</h1>
   <jstl:import url="include/header.html" charEncoding="utf-8"></jstl:import>
   
   
	<div class="tabContainer">
		<h2>病人信息</h2>
	<ul class="tabHeader">
		<jstl:forEach items="${patients}" var="patient">
						<li id="${patient['id'] }">${patient['name']}</li>
							</jstl:forEach>
	</ul>
		
		<div class='contents'>
			<!-- 显示出所有病人的信息-->
			<jstl:forEach items="${patients}" var="patient">
				<div class="tabContent">
				    
					姓名：${patient['name']}<br/>
					 年龄：${patient['age']}<br/>
					 性别：${patient['gender']}<br/>
					 身份证号：${patient['identityCard']}<br/>	
		
				</div>
				</jstl:forEach>
		</div>
		
	
	
	</div>

	
<div class="tabContainer2">
	<h2>药方信息</h2>
	<ul class="tabHeader2">

	</ul>
	
	<ul class='contents2'>

	</ul>
	</div>
</body>
</html>